import React, { useEffect } from 'react'
import { ConfigProvider } from 'antd'
import moment from 'moment'
import Router from './routes'
import { changeGreyModel, changeTheme, changeTritanopeModel, SettingInitialState } from '@/redux/slices/setting.slice'
import { langaugeList } from '@/locale/index'
import { useGetState } from './hooks/useRedux'
import { useDispatch } from 'react-redux'

export default function App() {
    const dispatch = useDispatch()
    const setting = useGetState<SettingInitialState>('setting')
    const langauge = setting.langauge as string
    moment.locale(langauge)
    useEffect(() => {
        dispatch(changeTheme(setting.theme))
        dispatch(changeGreyModel(setting.greyModel))
        dispatch(changeTritanopeModel(setting.tritanopeModel))
    }, [])

    return (
        <ConfigProvider locale={langaugeList[langauge]}>
            <Router />
        </ConfigProvider>
    )
}
